import { Button, Card, Col, Form, Input, message, Modal, Row, Select, Space, TimePicker } from "antd";
import { STATUS_OPTIONS } from "../data";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { useEffect } from "react";

const ShiftForm = ({ props = {} }) => {

    const [form] = Form.useForm();
    const { visible, title, width, row, isOpenDialog, onCallback } = props;

    const onSubmitHandler = () => {
        form.validateFields().then(model => {
            onCallback(model);
            onCancelHandler();
        });
    };

    const onCancelHandler = () => {
        form.resetFields();
        isOpenDialog();
    };

    const onCalculateDuration = (date) => {
        console.log('date: ', date);
    }

    useEffect(() => {
        if (visible) {
            form.setFieldsValue({
                ...row,
            });
        }
    }, [visible]);

    return (
        <Modal
            title={title}
            open={visible}
            width={width}
            onOk={onSubmitHandler}
            onCancel={onCancelHandler}
            bodyProps={{ style: { padding: '12px 12px 0' } }}
        >
            <Form
                form={form}
                name="form"
                labelAlign='right'
                autoComplete="off"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
            >
                <Form.Item key="id" name="id" hidden>
                    <Input />
                </Form.Item>
                <Row gutter={24}>
                    <Col span={12}>
                        <Form.Item label='名称' key="name" name="name" rules={[{ required: true, message: '请输入名称' }]}>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label='简称' key="shortName" name="shortName" rules={[{ required: true, message: '请输入简称' }]}>
                            <Input />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={24}>
                    <Col span={12}>
                        <Form.Item label='状态' key="status" name="status" rules={[{ required: true, message: '请选择状态' }]}>
                            <Select options={STATUS_OPTIONS()} style={{ width: '100%' }} />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label='备注' key="remark" name="remark">
                            <Input />
                        </Form.Item>
                    </Col>
                </Row>

                <Row gutter={24}>
                    <Col span={24}>
                        <Form.List name="segments">
                            {(fields, { add, remove }) => (
                                <>
                                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: 4 }}>
                                        <span style={{ marginRight: 8 }}>班段</span>
                                        <Button shape="circle" type="text" size="small"
                                            icon={<PlusOutlined />} style={{ color: 'blue' }}
                                            onClick={() => {
                                                if (fields.length < 3) {
                                                    add()
                                                } else {
                                                    message.warning('最多只能添加3个班段');
                                                }
                                            }}
                                        />
                                    </div>
                                    {fields.length > 0 && <Card style={{ maxHeight: 300, overflowY: 'auto' }}>
                                        {fields.map(({ key, name, ...restField }) => (
                                            <div key={key}>
                                                <Row gutter={24}>
                                                    <Form.Item key="id" name="id" hidden>
                                                        <Input />
                                                    </Form.Item>
                                                    <Form.Item key="shiftId" name="shiftId" hidden>
                                                        <Input />
                                                    </Form.Item>
                                                </Row>
                                                <Row gutter={24}>
                                                    <Col style={{ width: 350 }}>
                                                        <Form.Item
                                                            {...restField}
                                                            label="上班时间:"
                                                            name={[name, 'workTime']}
                                                            rules={[{ required: true, message: '请选择上班时间' }]}
                                                        >
                                                            <TimePicker.RangePicker changeOnScroll needConfirm={false} format="HH:mm" onCalendarChange={onCalculateDuration} />
                                                        </Form.Item>
                                                    </Col>
                                                </Row>
                                                <Row gutter={24}>
                                                    <Col style={{ width: 350 }}>
                                                        <Form.Item
                                                            {...restField}
                                                            label="休息时间:"
                                                            name={[name, 'restTime']}
                                                        >
                                                            <TimePicker.RangePicker changeOnScroll needConfirm={false} format="HH:mm" />
                                                        </Form.Item>
                                                    </Col>
                                                </Row>
                                                <Row gutter={24}>
                                                    <Col style={{ width: 350 }}>
                                                        <Form.Item
                                                            {...restField}
                                                            label="工作时长:"
                                                            name={[name, 'duration']}
                                                        >
                                                            <Input />
                                                        </Form.Item>
                                                    </Col>
                                                    <Col style={{ width: 50 }}>
                                                        <MinusCircleOutlined style={{ color: 'red' }} size='small' onClick={() => remove(name)} />
                                                    </Col>
                                                </Row>
                                            </div>
                                        ))}
                                    </Card>}
                                </>
                            )}
                        </Form.List>
                    </Col>
                </Row>
            </Form>
        </Modal>
    );
}

export default ShiftForm;